<!--  -->
<template>
  <div>
    <at-tabs v-if="iflogin" style="margin-top:10px">
      <at-tab-pane label="我的备忘" name="name1"></at-tab-pane>
      <div slot="extra">
        <at-button size="small" @click="addmemorandialog=true;form={}">增加备忘</at-button>
      </div>
    </at-tabs>
    <Waterfall
      :list="memorandumlist"
      :gutter="10"
      :width="240"
      v-if="iflogin"
      :breakpoints="{
    1200: { //当屏幕宽度小于等于1200
      rowPerView: 4,
    },
    800: { //当屏幕宽度小于等于800
      rowPerView: 3,
    },
    500: { //当屏幕宽度小于等于500
      rowPerView: 2,
    }
  }"
      ref="waterfall"
      class="mwaterfall"
      backgroundColor="rgb(255, 255, 255)"
    >
      <template slot="item" slot-scope="props">
        <div class="card">
          <div class="meetingtitle">
            <span @load="$refs.waterfall.refresh()">{{props.data.title}}</span>
            <VueEmoji ref="emoji" @input="onInput" :value="myText" width="30" height="30" />
          </div>
          <div class="meetingcontent">{{props.data.content}}</div>
          <img src="../../assets/images/tip.png" class="tip" />
        </div>
      </template>
    </Waterfall>

    <at-modal v-model="addmemorandialog">
      <div slot="header" style="text-align:center;">
        <span>备忘录添加</span>
      </div>
      <div style="text-align:center;">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="备忘名称">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <at-button type="primary" @click="addmemorand(form)">增加备忘</at-button>
      </div>
    </at-modal>
  </div>
</template>

<script>
import Waterfall from "vue-waterfall-plugin";
import VueEmoji from "emoji-vue";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      myText: "",
      addmemorandialog: false,
      form: {
        title: "",
        content: ""
      }
    };
  },

  components: { Waterfall,VueEmoji },

  computed: { ...mapState(["datalist", "iflogin", "memorandumlist"]) },

  methods: {
    ...mapMutations(["changeMemorylist"]),
    addmemorand(form) {
      this.changeMemorylist({
        title: form.title,
        content: form.content
      });
      this.$refs.waterfall.refresh();
      this.addmemorandialog = false;
    },
    onInput(event) {
      //event.data contains the value of the textarea
    },
    clearTextarea() {
      this.$refs.emoji.clear();
    },
    onResize: function(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag: function(x, y) {
      this.x = x;
      this.y = y;
    }
  }
};
</script>
<style scoped lang="scss">
 .mwaterfall {
      width: 100%;
      height: 100%;
      .card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        border: 1px solid #3e76de;
        .meetingtitle {
          display: flex;
          width: 100%;
          justify-content: space-between;
          padding: 10px 0;
          padding-left: 10px;
          align-items: center;
        }
        .meetingcontent {
          padding: 10px 10px 50px 10px;
          text-align: left;
        }
        .tip {
          position: absolute;
          left: -10px;
          top: -10px;
          width: 20px;
          height: 20px;
          animation: tiprotate 0.5s alternate infinite;
        }
        @keyframes tiprotate {
          from {
            transform: rotateZ(-20deg);
          }
          to {
            transform: rotateZ(20deg);
          }
        }
        @-webkit-keyframes tiprotate {
          from {
            transform: rotateZ(-20deg);
          }
          to {
            transform: rotateZ(20deg);
          }
        }
      }
    }
    .dragitem {
      border: 1.2px solid #825e23;
      border-top: 0;
      .title {
        width: 100%;
        background: url("../../assets/images/titlebg.png");
        background-size: 100% 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        position: relative;
        top: -10px;
      }
      .dragcontent {
        width: 100%;
        .mymeeting {
          display: flex;
          flex-wrap: wrap;
          .meetingitem,
          .mwaterfall {
            border: 1px solid rgb(224, 224, 224);
            margin: 5px;
            padding: 0 10px;
            position: relative;
            .meetingtitle {
              display: flex;
              width: 100%;
              justify-content: space-between;
              padding: 10px 0;
              align-items: center;
            }
            .meetingcontent {
              padding: 10px 10px 50px 10px;
            }
            .tip {
              position: absolute;
              left: -10px;
              top: -10px;
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
</style>